import {
  Cell,
  Ellipsis,
  InfiniteLoading,
  Toast,
} from "@nutui/nutui-react-taro";
import { View } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useRequest } from "ahooks";
import { useEffect, useState } from "react";
import { getNoticeListApi } from "../../../servers/servers";

const sleep = (time) =>
  new Promise((resolve) => {
    setTimeout(resolve, time);
  });
const InfiniteUlStyle = {
  height: "100%",
  width: "100%",
  padding: "0",
  overflowY: "auto",
  overflowX: "hidden",
};

const InfiniteLiStyle = {
  marginTop: "10px",
  fontSize: "14px",
  color: "rgba(100, 100, 100, 1)",
  textAlign: "center",
};
const Notice = () => {
  const [refreshList, setRefreshList] = useState([]);
  const [refreshHasMore, setRefreshHasMore] = useState(true);

  const [show, SetShow] = useState(false);
  const [toastMsg, SetToastMsg] = useState("");
  const toastShow = (msg) => {
    SetToastMsg(msg);
    SetShow(true);
  };

  useEffect(() => {
    init();
  }, []);

  // 求列表
  const { data: newList } = useRequest(async () => {
    const _res = await getNoticeListApi();

    return _res?.data;
  });

  const init = async () => {
    // for (let i = 0; i < 30; i++) {
    //   refreshList.push(`${i}`);
    // }
    // setRefreshList([...refreshList]);
  };

  // const refreshLoadMore = async () => {
  //   await sleep(2000);
  //   const curLen = refreshList.length;
  //   for (let i = curLen; i < curLen + 10; i++) {
  //     refreshList.push(`${i}`);
  //   }
  //   if (refreshList.length >= 120) {
  //     setRefreshHasMore(false);
  //   } else {
  //     setRefreshList([...refreshList]);
  //   }
  // };

  // const refresh = async () => {
  //   await sleep(1000);
  //   toastShow("刷新成功");
  // };

  return (
    <>
      <View
        style={{
          height: "100%",
        }}
      >
        <ul id="refreshScroll" style={InfiniteUlStyle}>
          <InfiniteLoading
            threshold={50}
            pullingText={
              <>
                <img
                  alt=""
                  style={{ height: "26px", width: "36px" }}
                  src="https://img13.360buyimg.com/imagetools/jfs/t1/219180/19/37902/438/65fa8cbbF5278d022/5eabe69b64bba791.png"
                  className="nut-infinite-top-tips-icons"
                />
                下拉刷新
              </>
            }
            loadingText={
              <>
                <img
                  alt=""
                  style={{ height: "24px", width: "24px" }}
                  src="https://img11.360buyimg.com/imagetools/jfs/t1/180248/35/42577/173/65fab7e9Fa868ae37/41e33477f960b5b2.png"
                  className="nut-infinite-bottom-tips-icons"
                />
                加载中
              </>
            }
            target="refreshScroll"
            pullRefresh
            // hasMore={refreshHasMore}
            // onLoadMore={refreshLoadMore}
            // onRefresh={refresh}
            onScroll={(number) => {
              console.log("滚动", number);
            }}
          >
            {newList?.map((item, index) => {
              return (
                <Cell
                  key={index}
                  onClick={() => {
                    Taro.navigateTo({
                      url: `/pages/index/notice/details/index`,
                      success: function (res) {
                        // 通过eventChannel向被打开页面传送数据
                        res.eventChannel.emit("ceshi", {
                          data: item,
                        });
 
                      },
                    });
                  }}
                >
                  <View className="at-article">
                    <View className="at-article__h3">
                      <Ellipsis content={item?.title} direction="end" />
                    </View>
                    <View className="at-article__info">
                      {item?.create_time}&nbsp;&nbsp;&nbsp;
                      {/* 这是作者 */}
                    </View>

                    <View className="at-article__p">{item?.content?.slice(0,20)} ...</View>
                  </View>
                </Cell>
              );
            })}
          </InfiniteLoading>
        </ul>
        <Toast
          type="text"
          visible={show}
          content={toastMsg}
          onClose={() => {
            SetShow(false);
          }}
        />
      </View>
    </>
  );
};
export default Notice;
